<!DOCTYPE html>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
<link rel="stylesheet" href="../js/easyui/themes/icon.css" />

<!-- 引入ztree -->
<script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css" />

<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		$(function() {
			$('#dg').datagrid({

				url: 'product.json',
				pagination: true,
				fit: true,
				border: false,
				rownumbers: true,
				striped: true,
				pageList: [1, 2, 10],
				toolbar: [{
					id: 'save',
					text: '保存',
					iconCls: 'icon-save',
					handler: function() { alert('save') }
				}, '-', {
					id: 'edit',
					text: '编辑',
					iconCls: 'icon-edit',
					handler: function() { alert('edit') }
				}, '-', {
					id: 'help',
					text: '帮助',
					iconCls: 'icon-help',
					handler: function() { alert('help') }
				}],

				columns: [
					[

						{ field: 'id', title: 'ID', width: 100 },

						{ field: 'name', title: 'Name', width: 100 },

						{ field: 'price', title: 'Price', width: 100, align: 'right' }

					]
				]

			});

		})
	</script>

	<body>
		<table id="dg"></table>
	</body>

</html>